<template>
  <view>
    <view class="alldiv">
      <view class="topBox">
        <!-- 第一层返回 -->
        <view class="topdiv">
          <image src='@/static/icon/shop/topBj2.png' class="background-image"></image>
          <view class="navdiv" @click="navigateBack">
            <u-icon :customStyle="{ marginRight: 32 + 'rpx' }" name="arrow-left" size="17" color="rgba(0,0,0,0.9)" labelColor="rgba(0,0,0,0.9)" :label="language.FreeRide.feeDetails"></u-icon>
          </view>
        </view>
      </view>
      <view class="bodydiv">
        <!-- 接单信息 -->
        <text class="title van-ellipsis">
          {{ language.FreeRide.freeRideFeeDatails }}
        </text>
        <view class="item" style="margin-top: 24rpx;">
          <view>
            {{ language.FreeRide.sfc }}-{{ endAddress }}
            <text class="sub-title ml-6">{{ endTime }}</text>
          </view>
          <!-- 预约用车 -->
          <!-- <view>
            <text class="sub-title">{{ carPoolingStatus }}</text>
          </view> -->
          <view>
            {{ language.Takingataxi.exclusiveTextTip1 }}({{ distance }}{{ language.FreeRide.kilometre }})
            <text class="float-right">{{ payNum }}{{ language.FreeRide.carPoolingTextTip2 }}</text>
          </view>
          <u-divider class="divider"></u-divider>
          <view class="text-right">
            <text style="font-size: 28rpx;">
              {{ language.FreeRide.sum }}{{ payNum }}{{ language.FreeRide.carPoolingTextTip2 }}
            </text>
          </view>
          <!-- 拼车返款 -->
          <!-- <view style="color: rgba(255, 141, 26, 1);" class="mt-15">
            {{ language.FreeRide.pcfk }}
            <text class="float-right">-{{ sale }}{{ language.FreeRide.carPoolingTextTip2 }}</text>
          </view> -->
          <u-divider class="divider"></u-divider>
          <view class="text-right">
            <text style="font-size: 28rpx;">
              {{ language.FreeRide.sfje }}
              <text class="green">{{ (Number(payNum) - Number(sale)).toFixed(2) }}</text>
              {{ language.FreeRide.carPoolingTextTip2 }}
            </text>
          </view>
          <view class="mt-15">
            {{ language.FreeRide.grzf }}
            <text class="float-right">{{ language.FreeRide.actuallyPaid }}{{ (Number(payNum) - Number(sale)).toFixed(2) }}{{ language.FreeRide.carPoolingTextTip2 }}</text>
          </view>
          <!-- <view v-if="explain">
            <u-divider class="divider"></u-divider>
            <view>
              <text class="sub-title" style="font-size: 20rpx;">{{ explain }}</text>
            </view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTaxiOrder } from '@/api/driver'
export default {
  data() {
    return {
      language: {},
      endTime: '',
      carPoolingStatus: '预约用车-拼车',
      distance: '',
      payNum: '64.64',
      sale: '9.45',
      endAddress: '',
      // explain: '价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说明价格说'
    }
  },
  onLoad(option) {
    if (!option.id) {
      this.returns()
    }
    this.orderId = option.id
    this.getlanguagedata();
    try {
      getTaxiOrder({id: option.id}).then(res => {
        if (res.code === 0) {
          this.endAddress = res.data.endPlace;
          if (res.data.endTime) {
            this.endTime = this.convertDateString(res.data.endTime)
          }
          this.payNum = res.data.cost;
          this.distance = res.data.distance;
        }
      })
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    navigateBack() {
      uni.reLaunch({
        url: "/pages/Home/Home",
      });
    },
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
    },
    convertDateString(dateString) {
      // 使用正则表达式提取日期和时间部分
      const [datePart, timePart] = dateString?.split(' ');
      
      // 格式化为目标格式
      return datePart;
    }
  }
}
</script>

<style lang="less" scoped>
.float-right {
  float: right;
}
.text-right {
  text-align: right;
}
.ml-6 {
  margin-left: 12rpx;
}
.mt-15 {
  margin-top: 30rpx;
}
.alldiv {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .topBox {
    position: relative;
    width: 100%;
    background: linear-gradient(94.07deg, rgba(235, 255, 236, 1) 0%, rgba(220, 247, 242, 1) 100%);
    overflow: hidden;
    flex-shrink: 0;
    .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    // 这个是搜索和返回样式
    .topdiv {
      width: 100%;
      height: 180px;
      display: flex;
      margin: calc(var(--status-bar-height) + 10px) 0 4px 0;
      // 这个是返回样式
      .navdiv {
        position: relative;
        margin-left: 17px;
        height: 34px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        ::v-deep {
          .u-icon__label {
            font-size: 14px;
          }
        }
      }
    }
  }
  .bodydiv {
    position: relative;
    flex: 1;
    height: 0;
    overflow-y: auto;
    background-color: #fff;
    margin-top: -134px;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
    padding: 24px 16px;
    .title {
      font-size: 32rpx;
      font-weight: 700;
      color: rgba(56, 56, 56, 1);
      display: block;
    }
    .item {
      border-radius: 16px;
      box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
      margin-top: 16px;
      padding: 44rpx 24rpx;
      font-size: 28rpx;
      color: rgba(51, 51, 51, 1);
      line-height: 1.6;
    }
    .sub-title {
      font-size: 24rpx;
      color: rgba(153, 153, 153, 1);
    }
    .green {
      color: rgba(47, 212, 184, 1);
      font-size: 48rpx;
      font-weight: 700;
      margin: 0 4rpx;
    }
  }
}
.u-divider {
  margin: 24rpx 0 36rpx;
}
</style>